在談使用方法之前，我們可以先講一下為何我們需要監聽動態路由。

當我們使用動態路由匹配功能時，可能會在頁面中跳轉至其他也由動態路由生成的頁面，此時可能會發生「網址的 id 有變動但畫面沒有變動」的狀況。

個人判斷是因為 Vue 將此判定皆為同一個頁面所致。

因此我們需要監聽動態路由變動，來達成我們需要的跳轉效果。

開始監聽

我們首先可以先在 data 定義一個 pageId，並賦值為 $route.params.id

  data () {
    return {
      pageId: this.$route.params.id,
    }
  },

接著開始監聽路由變化，每當 $route 的值變動時，就將pageId重新賦值為to.params.id。

($route 有 from 和 to 兩個參數，from 代表現在所在的頁面，to 代表要前往的頁面。)

接著傳出一個 $emit 重新刷新頁面

watch: {
    // 監聽動態路由變化
    $route (to) {
      this.pageId = to.params.id
      this.$emit('change-page')
    }
  },

這樣就完成啦~